<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        属性节点(html属性)
        (1)写在标签内,和标签名以一个空格分隔叫做属性, 
        (2)组成: 属性名="属性值" 
        (3)属性可以没有也可以有多个,多个之间用空格分隔
            属性是对标签的说明

        html5新增自定义属性 => 允许用户按照自己的需求自定义属性(属性名="属性值"),可以在标签内存储一些数据
            (1) 自定义属性一般以data-开头,后接属性  => data-xxx="属性值"
            (2) 用户可以自己随意定义

        注意: 属性存在于标签内(依存于元素节点),获取属性节点之前,需要先获取元素节点
     -->
    <div id="demo" class="box" title="hello" data-id="0" asd="zxc"></div>
</body>
<script>

    var demo = document.querySelector("#demo"); // 对应id名获取元素(对象类型)  demo引用元素的内存地址
    console.log(demo);


    // 通过元素节点获取属性节点 => 对属性节点取值和赋值  => 麻烦 (了解)

    // Element.getAttributeNode(attrName) 对应属性名获取属性节点
    // Element.removeAttributeNode(attrName) 对应属性名删除属性节点
    // var idAttr = demo.getAttributeNode("id");
    // console.log(idAttr,typeof idAttr);

    // // 取值
    // console.log(idAttr.nodeName); // 属性节点的节点名称(属性名)
    // console.log(idAttr.nodeValue); // 属性节点的节点值(属性值)

    // // 赋值(一般修改属性值)
    // idAttr.nodeValue = "DEMO";

    // console.log(idAttr);
    // console.log(demo);
  


    // 属性节点的增删改查=>只操作标签内的HTML属性
    // Element.getAttribute(attrName)            对应属性名获取属性值 => 有属性就返回属性值,没有该属性就返回null
    // Element.setAttribute(attrName,attrValue)  对应属性名设置属性值 => 没有就新增,有就修改 返回值:undefined
    // Element.removeAttribute(attrName)         对应属性名删除属性节点 => 有就删除,没有就跳过 返回值:undefined

   /*  var id = demo.getAttribute("id");
    console.log(id);

    // class是关键字 => 无法作为变量
    var cls = demo.getAttribute("class");
    console.log(cls);

    var dataId = demo.getAttribute("data-id");
    console.log(dataId);

    var dataIndex = demo.getAttribute("data-index");
    console.log(dataIndex); */


    demo.setAttribute("id","DEMO");
    demo.setAttribute("class","BOX");
    demo.setAttribute("data-id","零");
    demo.setAttribute("data-index","0");


    demo.removeAttribute("id");
    demo.removeAttribute("class");
    demo.removeAttribute("title");
    demo.removeAttribute("data-id");
    demo.removeAttribute("asd");
    demo.removeAttribute("data-index");

    console.log(demo);

</script>
</html>